<template>
  <a-modal v-model="visible" title="添加新字段" @ok="handleAddOk(item)">
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" ref="form">
      <a-form-model-item
        label="字段名称"
        :rules="{
          required: true
        }"
      >
        <a-input v-model="form.fieldName" placeholder="1-8个字符，不能与现有字段重复" :maxLength="8" />
      </a-form-model-item>
      <a-form-model-item
        label="字段类型"
        :rules="{
          required: true
        }"
      >
        <a-select v-model="form.fieldType" placeholder="选项" v-selection @change="handleChange">
          <!--  -->
          <a-select-option value="1">选项</a-select-option>
          <a-select-option value="2">文件</a-select-option>
          <a-select-option value="3">文本</a-select-option>
          <a-select-option value="4">图片</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model v-if="show === 0" ref="dynamicValidateForm" :model="dynamicValidateForm" v-bind="formItemLayoutWithOutLabel">
        <a-form-model-item
          v-for="(domain, index) in dynamicValidateForm.domains"
          :key="domain.key"
          v-bind="index === 0 ? formItemLayout : {}"
          :label="index === 0 ? '字段选项' : ''"
          :prop="'domains.' + index + '.value'"
          :rules="{
            required: true,
            message: '请输入自定义选项',
            trigger: 'blur'
          }"
          class="field option"
        >
          <a-input v-model="domain.value" placeholder="自定义选项" style="width: 60%; margin-right: 8px" />
          <a-icon
            v-if="dynamicValidateForm.domains.length > 1"
            class="dynamic-delete-button"
            type="delete"
            :disabled="dynamicValidateForm.domains.length === 1"
            @click="removeDomain(domain)"
          />
        </a-form-model-item>
        <a-form-model-item v-bind="formItemLayoutWithOutLabel">
          <a-button type="dashed" style="width: 60%" @click="addDomain"> <a-icon type="plus" />添加 </a-button>
        </a-form-model-item>
        <a-form-model-item v-bind="formItemLayoutWithOutLabel"></a-form-model-item>
      </a-form-model>
      <a-form-model-item label="字段必填" v-if="show == 3 || show == 2">
        <a-radio-group v-model="form.resource">
          <a-radio value="1">必填</a-radio>
          <a-radio value="2">选填</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="字段长度" v-if="show === 1">
        <a-input v-model="form.name1" placeholder />
      </a-form-model-item>
      <a-form-model-item label="提示文案" v-if="show === 1">
        <a-input v-model="form.name2" placeholder="1-10个字符" :maxLength="10" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
import Vue from "vue";
export default {
  name: "Addfield",
  data() {
    return {
      show: 0,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 20, offset: 4 }
        }
      },
      dynamicValidateForm: {
        domains: []
      },

      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      form: {},
      visible: false,
      companyId: ""
    };
  },
  created() {
    // this.defaultSelectedKeys[0] = this.$route.name || "";
    this.companyId = this.$store.state.hr.companyId;
    this.getData();
  },
  methods: {
    handleChange(value) {
      if (value === "option") {
        this.show = 0;
      }
      if (value === "text") {
        this.show = 1;
      }
      if (value === "picture") {
        this.show = 2;
      }
      if (value === "file") {
        this.show = 3;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      const index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: "",
        key: Date.now()
      });
    },
    onSubmit() {},

    showModal() {
      this.visible = true;
    },
    handleOk(e) {},
    getData() {},
    watch() {},
    save(data) {},
    transData(data) {
      const array = [];

      let unique, open;
      data.forEach(e => {
        const val = this.res[e.enName];
        // 必填
        if (val === 2) {
          unique = 1;
          open = 1;
        } else {
          unique = 0;
          open = val;
        }
        const listArr = [];
        let a, b;
        if (e.list.length > 0) {
          e.list.forEach(item => {
            const n = this.res[e.listName][item.enName];
            if (n === 2) {
              a = 1;
              b = 1;
            } else {
              a = 0;
              b = n;
            }
            listArr.push({
              ...item,
              unique: a,
              open: b,
              id: this.res[e.listName].id
            });
          });
        }
        array.push({
          ...e,
          unique,
          open,
          list: listArr
        });
      });

      return array;
    }
  }
};
</script>
<style lang="scss" scoped>
.add-field {
  border: none;
  margin-top: 12px;
}
.add-field-icon {
  color: var(--primary);
  font-size: 18px;
}
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.ant-form {
  position: relative;
  left: 35px;
}
.page-box-employer-setting {
  .ant-collapse > .ant-collapse-item > .ant-collapse-header {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 0px 0px rgba(215, 215, 215, 1);
    font-size: 18px;
    font-weight: 600;
    color: rgba(37, 37, 37, 1);
    line-height: 22px;
  }
  .p24 {
    background: #fff;
  }
  .ant-table-thead > tr > th {
    background: #fafafa;
  }
  .ant-collapse .ant-collapse-item .ant-collapse-header .anticon {
    left: initial;
    right: 16px;
  }
  .ant-layout {
    background: #fff;
  }

  .ant-collapse-content {
    padding-bottom: 24px;
  }

  .ant-collapse-item {
    font-size: 16px;
    color: #252525;
  }
}
</style>
